import*as e from"../../core/host/host.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../ui/legacy/theme_support/theme_support.js";import*as o from"../../core/root/root.js";import*as s from"../../core/sdk/sdk.js";import*as r from"../../models/emulation/emulation.js";import*as n from"../../core/common/common.js";import*as a from"../../core/i18n/i18n.js";import*as d from"../../core/platform/platform.js";import*as l from"../mobile_throttling/mobile_throttling.js";import*as c from"./components/components.js";import*as h from"../../models/bindings/bindings.js";var m={cssContent:".device-mode-x{margin:0 1px;font-size:16px}.device-mode-empty-toolbar-element{width:0}"};const p={dimensions:"Dimensions",width:"Width",heightLeaveEmptyForFull:"Height (leave empty for full)",zoom:"Zoom",devicePixelRatio:"Device pixel ratio",deviceType:"Device type",experimentalWebPlatformFeature:'"`Experimental Web Platform Feature`" flag is enabled. Click to disable it.',experimentalWebPlatformFeatureFlag:'"`Experimental Web Platform Feature`" flag is disabled. Click to enable it.',moreOptions:"More options",fitToWindowF:"Fit to window ({PH1}%)",autoadjustZoom:"Auto-adjust zoom",defaultF:"Default: {PH1}",hideDeviceFrame:"Hide device frame",showDeviceFrame:"Show device frame",hideMediaQueries:"Hide media queries",showMediaQueries:"Show media queries",hideRulers:"Hide rulers",showRulers:"Show rulers",removeDevicePixelRatio:"Remove device pixel ratio",addDevicePixelRatio:"Add device pixel ratio",removeDeviceType:"Remove device type",addDeviceType:"Add device type",resetToDefaults:"Reset to defaults",closeDevtools:"Close DevTools",responsive:"Responsive",edit:"Edit…",portrait:"Portrait",landscape:"Landscape",rotate:"Rotate",none:"None",screenOrientationOptions:"Screen orientation options",toggleDualscreenMode:"Toggle dual-screen mode"},u=a.i18n.registerUIStrings("panels/emulation/DeviceModeToolbar.ts",p),g=a.i18n.getLocalizedString.bind(void 0,u);function v(e,t){e.setTitle(t),e.element.title=t}class b{model;showMediaInspectorSetting;showRulersSetting;experimentDualScreenSupport;deviceOutlineSetting;showDeviceScaleFactorSetting;showUserAgentTypeSetting;autoAdjustScaleSetting;lastMode;elementInternal;emulatedDevicesList;persistenceSetting;spanButton;modeButton;widthInput;heightInput;deviceScaleItem;deviceSelectItem;scaleItem;uaItem;experimentalButton;cachedDeviceScale;cachedUaType;xItem;throttlingConditionsItem;cachedModelType;cachedScale;cachedModelDevice;cachedModelMode;constructor(e,i,s){this.model=e,this.showMediaInspectorSetting=i,this.showRulersSetting=s,this.experimentDualScreenSupport=o.Runtime.experiments.isEnabled("dualScreenSupport"),this.deviceOutlineSetting=this.model.deviceOutlineSetting(),this.showDeviceScaleFactorSetting=n.Settings.Settings.instance().createSetting("emulation.showDeviceScaleFactor",!1),this.showDeviceScaleFactorSetting.addChangeListener(this.updateDeviceScaleFactorVisibility,this),this.showUserAgentTypeSetting=n.Settings.Settings.instance().createSetting("emulation.showUserAgentType",!1),this.showUserAgentTypeSetting.addChangeListener(this.updateUserAgentTypeVisibility,this),this.autoAdjustScaleSetting=n.Settings.Settings.instance().createSetting("emulation.autoAdjustScale",!0),this.lastMode=new Map,this.elementInternal=document.createElement("div"),this.elementInternal.classList.add("device-mode-toolbar");const a=this.elementInternal.createChild("div","device-mode-toolbar-spacer");a.createChild("div","device-mode-toolbar-spacer");const d=new t.Toolbar.Toolbar("",a);this.fillLeftToolbar(d);const l=new t.Toolbar.Toolbar("",this.elementInternal);l.makeWrappable(),this.widthInput=new c.DeviceSizeInputElement.SizeInputElement(g(p.width)),this.widthInput.addEventListener("sizechanged",(({size:e})=>{this.model.setWidthAndScaleToFit(e)})),this.heightInput=new c.DeviceSizeInputElement.SizeInputElement(g(p.heightLeaveEmptyForFull)),this.heightInput.addEventListener("sizechanged",(({size:e})=>{this.model.setHeightAndScaleToFit(e)})),this.fillMainToolbar(l);const h=this.elementInternal.createChild("div","device-mode-toolbar-spacer"),m=new t.Toolbar.Toolbar("device-mode-toolbar-fixed-size",h);m.makeWrappable(),this.fillRightToolbar(m);const u=new t.Toolbar.Toolbar("device-mode-toolbar-fixed-size",h);u.makeWrappable(),this.fillModeToolbar(u),h.createChild("div","device-mode-toolbar-spacer");const v=new t.Toolbar.Toolbar("device-mode-toolbar-options",h);function b(){const t=e.toolbarControlsEnabledSetting().get();d.setEnabled(t),l.setEnabled(t),m.setEnabled(t),u.setEnabled(t),v.setEnabled(t)}v.makeWrappable(),this.fillOptionsToolbar(v),this.emulatedDevicesList=r.EmulatedDevices.EmulatedDevicesList.instance(),this.emulatedDevicesList.addEventListener("CustomDevicesUpdated",this.deviceListChanged,this),this.emulatedDevicesList.addEventListener("StandardDevicesUpdated",this.deviceListChanged,this),this.persistenceSetting=n.Settings.Settings.instance().createSetting("emulation.deviceModeValue",{device:"",orientation:"",mode:""}),this.model.toolbarControlsEnabledSetting().addChangeListener(b),b()}createEmptyToolbarElement(){const e=document.createElement("div");return e.classList.add("device-mode-empty-toolbar-element"),e}fillLeftToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.deviceSelectItem=new t.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this)),this.deviceSelectItem.setGlyph(""),this.deviceSelectItem.turnIntoSelect(!0),this.deviceSelectItem.setDarkText(),e.appendToolbarItem(this.deviceSelectItem)}fillMainToolbar(e){e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.widthInput));const i=document.createElement("div");i.classList.add("device-mode-x"),i.textContent="×",this.xItem=this.wrapToolbarItem(i),e.appendToolbarItem(this.xItem),e.appendToolbarItem(new t.Toolbar.ToolbarItem(this.heightInput))}fillRightToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.scaleItem=new t.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this)),v(this.scaleItem,g(p.zoom)),this.scaleItem.setGlyph(""),this.scaleItem.turnIntoSelect(),this.scaleItem.setDarkText(),e.appendToolbarItem(this.scaleItem),e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.deviceScaleItem=new t.Toolbar.ToolbarMenuButton(this.appendDeviceScaleMenuItems.bind(this)),this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get()),v(this.deviceScaleItem,g(p.devicePixelRatio)),this.deviceScaleItem.setGlyph(""),this.deviceScaleItem.turnIntoSelect(),this.deviceScaleItem.setDarkText(),e.appendToolbarItem(this.deviceScaleItem),e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.uaItem=new t.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this)),this.uaItem.setVisible(this.showUserAgentTypeSetting.get()),v(this.uaItem,g(p.deviceType)),this.uaItem.setGlyph(""),this.uaItem.turnIntoSelect(),this.uaItem.setDarkText(),e.appendToolbarItem(this.uaItem),this.throttlingConditionsItem=l.ThrottlingManager.throttlingManager().createMobileThrottlingButton(),e.appendToolbarItem(this.throttlingConditionsItem)}fillModeToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement())),this.modeButton=new t.Toolbar.ToolbarButton("","screen-rotation"),this.modeButton.addEventListener(t.Toolbar.ToolbarButton.Events.Click,this.modeMenuClicked,this),e.appendToolbarItem(this.modeButton),this.experimentDualScreenSupport&&(this.spanButton=new t.Toolbar.ToolbarButton("","device-fold"),this.spanButton.addEventListener(t.Toolbar.ToolbarButton.Events.Click,this.spanClicked,this),e.appendToolbarItem(this.spanButton),this.createExperimentalButton(e))}createExperimentalButton(e){e.appendToolbarItem(new t.Toolbar.ToolbarSeparator(!0));const i=this.model.webPlatformExperimentalFeaturesEnabled()?g(p.experimentalWebPlatformFeature):g(p.experimentalWebPlatformFeatureFlag);this.experimentalButton=new t.Toolbar.ToolbarToggle(i,"experiment-check"),this.experimentalButton.setToggled(this.model.webPlatformExperimentalFeaturesEnabled()),this.experimentalButton.setEnabled(!0),this.experimentalButton.addEventListener(t.Toolbar.ToolbarButton.Events.Click,this.experimentalClicked,this),e.appendToolbarItem(this.experimentalButton)}experimentalClicked(){e.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab("chrome://flags/#enable-experimental-web-platform-features")}fillOptionsToolbar(e){e.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));const i=new t.Toolbar.ToolbarMenuButton(this.appendOptionsMenuItems.bind(this));v(i,g(p.moreOptions)),e.appendToolbarItem(i)}appendScaleMenuItems(e){this.model.type()===r.DeviceModeModel.Type.Device&&e.footerSection().appendItem(g(p.fitToWindowF,{PH1:this.getPrettyFitZoomPercentage()}),this.onScaleMenuChanged.bind(this,this.model.fitScale()),!1),e.footerSection().appendCheckboxItem(g(p.autoadjustZoom),this.onAutoAdjustScaleChanged.bind(this),this.autoAdjustScaleSetting.get());const t=function(t,i){e.defaultSection().appendCheckboxItem(t,this.onScaleMenuChanged.bind(this,i),this.model.scaleSetting().get()===i,!1)}.bind(this);t("50%",.5),t("75%",.75),t("100%",1),t("125%",1.25),t("150%",1.5),t("200%",2)}onScaleMenuChanged(e){this.model.scaleSetting().set(e)}onAutoAdjustScaleChanged(){this.autoAdjustScaleSetting.set(!this.autoAdjustScaleSetting.get())}appendDeviceScaleMenuItems(e){const t=this.model.deviceScaleFactorSetting(),i=this.model.uaSetting().get()===r.DeviceModeModel.UA.Mobile||this.model.uaSetting().get()===r.DeviceModeModel.UA.MobileNoTouch?r.DeviceModeModel.defaultMobileScaleFactor:window.devicePixelRatio;function o(e,i,o){e.appendCheckboxItem(i,t.set.bind(t,o),t.get()===o)}o(e.headerSection(),g(p.defaultF,{PH1:i}),0),o(e.defaultSection(),"1",1),o(e.defaultSection(),"2",2),o(e.defaultSection(),"3",3)}appendUserAgentMenuItems(e){const t=this.model.uaSetting();function i(i,o){e.defaultSection().appendCheckboxItem(i,t.set.bind(t,o),t.get()===o)}i(r.DeviceModeModel.UA.Mobile,r.DeviceModeModel.UA.Mobile),i(r.DeviceModeModel.UA.MobileNoTouch,r.DeviceModeModel.UA.MobileNoTouch),i(r.DeviceModeModel.UA.Desktop,r.DeviceModeModel.UA.Desktop),i(r.DeviceModeModel.UA.DesktopTouch,r.DeviceModeModel.UA.DesktopTouch)}appendOptionsMenuItems(t){const i=this.model;function o(e,t,o,s,n){void 0===n&&(n=i.type()===r.DeviceModeModel.Type.None),e.appendItem(t.get()?o:s,t.set.bind(t,!t.get()),n)}o(t.headerSection(),this.deviceOutlineSetting,g(p.hideDeviceFrame),g(p.showDeviceFrame),i.type()!==r.DeviceModeModel.Type.Device),o(t.headerSection(),this.showMediaInspectorSetting,g(p.hideMediaQueries),g(p.showMediaQueries)),o(t.headerSection(),this.showRulersSetting,g(p.hideRulers),g(p.showRulers)),o(t.defaultSection(),this.showDeviceScaleFactorSetting,g(p.removeDevicePixelRatio),g(p.addDevicePixelRatio)),o(t.defaultSection(),this.showUserAgentTypeSetting,g(p.removeDeviceType),g(p.addDeviceType)),t.appendItemsAtLocation("deviceModeMenu"),t.footerSection().appendItem(g(p.resetToDefaults),this.reset.bind(this)),t.footerSection().appendItem(g(p.closeDevtools),e.InspectorFrontendHost.InspectorFrontendHostInstance.closeWindow.bind(e.InspectorFrontendHost.InspectorFrontendHostInstance))}reset(){this.deviceOutlineSetting.set(!1),this.showDeviceScaleFactorSetting.set(!1),this.showUserAgentTypeSetting.set(!1),this.showMediaInspectorSetting.set(!1),this.showRulersSetting.set(!1),this.model.reset()}wrapToolbarItem(e){const i=document.createElement("div");return t.Utils.createShadowRootWithCoreStyles(i,{cssFile:m,delegatesFocus:void 0}).appendChild(e),new t.Toolbar.ToolbarItem(i)}emulateDevice(e){const t=this.autoAdjustScaleSetting.get()?void 0:this.model.scaleSetting().get();this.model.emulate(r.DeviceModeModel.Type.Device,e,this.lastMode.get(e)||e.modes[0],t)}switchToResponsive(){this.model.emulate(r.DeviceModeModel.Type.Responsive,null,null)}filterDevices(e){return(e=e.filter((function(e){return e.show()}))).sort(r.EmulatedDevices.EmulatedDevice.deviceComparator),e}standardDevices(){return this.filterDevices(this.emulatedDevicesList.standard())}customDevices(){return this.filterDevices(this.emulatedDevicesList.custom())}allDevices(){return this.standardDevices().concat(this.customDevices())}appendDeviceMenuItems(e){function t(t){if(!t.length)return;const i=e.section();for(const e of t)i.appendCheckboxItem(e.title,this.emulateDevice.bind(this,e),this.model.device()===e,!1)}e.headerSection().appendCheckboxItem(g(p.responsive),this.switchToResponsive.bind(this),this.model.type()===r.DeviceModeModel.Type.Responsive,!1),t.call(this,this.standardDevices()),t.call(this,this.customDevices()),e.footerSection().appendItem(g(p.edit),this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),!1)}deviceListChanged(){const e=this.model.device();if(!e)return;const t=this.allDevices();-1===t.indexOf(e)?t.length?this.emulateDevice(t[0]):this.model.emulate(r.DeviceModeModel.Type.Responsive,null,null):this.emulateDevice(e)}updateDeviceScaleFactorVisibility(){this.deviceScaleItem&&this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get())}updateUserAgentTypeVisibility(){this.uaItem&&this.uaItem.setVisible(this.showUserAgentTypeSetting.get())}spanClicked(){const e=this.model.device();if(!e||!e.isDualScreen)return;const t=this.autoAdjustScaleSetting.get()?void 0:this.model.scaleSetting().get(),i=this.model.mode();if(!i)return;const o=e.getSpanPartner(i);o&&this.model.emulate(this.model.type(),e,o,t)}modeMenuClicked(e){const i=this.model.device(),o=this.model,s=this.autoAdjustScaleSetting;if(o.type()===r.DeviceModeModel.Type.Responsive){const e=o.appliedDeviceSize();return void(s.get()?o.setSizeAndScaleToFit(e.height,e.width):(o.setWidth(e.height),o.setHeight(e.width)))}if(!i)return;if((i.isDualScreen||2===i.modes.length)&&i.modes[0].orientation!==i.modes[1].orientation){const e=s.get()?void 0:o.scaleSetting().get(),t=o.mode();if(!t)return;const r=i.getRotationPartner(t);if(!r)return;return void o.emulate(o.type(),o.device(),r,e)}if(!this.modeButton)return;const n=new t.ContextMenu.ContextMenu(e.data,{useSoftMenu:!1,x:this.modeButton.element.getBoundingClientRect().left,y:this.modeButton.element.getBoundingClientRect().top+this.modeButton.element.offsetHeight});function a(e,t){if(!i)return;const o=i.modesForOrientation(e);if(o.length)if(1===o.length)d(o[0],t);else for(let e=0;e<o.length;e++)d(o[e],t+" – "+o[e].title)}function d(e,t){n.defaultSection().appendCheckboxItem(t,l.bind(null,e),o.mode()===e,!1)}function l(e){const t=s.get()?void 0:o.scaleSetting().get();o.emulate(o.type(),o.device(),e,t)}a(r.EmulatedDevices.Vertical,g(p.portrait)),a(r.EmulatedDevices.Horizontal,g(p.landscape)),n.show()}getPrettyFitZoomPercentage(){return`${(100*this.model.fitScale()).toFixed(0)}`}getPrettyZoomPercentage(){return`${(100*this.model.scale()).toFixed(0)}`}element(){return this.elementInternal}update(){this.model.type()!==this.cachedModelType&&(this.cachedModelType=this.model.type(),this.widthInput.disabled=this.model.type()!==r.DeviceModeModel.Type.Responsive,this.heightInput.disabled=this.model.type()!==r.DeviceModeModel.Type.Responsive,this.deviceScaleItem.setEnabled(this.model.type()===r.DeviceModeModel.Type.Responsive),this.uaItem.setEnabled(this.model.type()===r.DeviceModeModel.Type.Responsive),this.model.type()===r.DeviceModeModel.Type.Responsive?(this.modeButton.setEnabled(!0),v(this.modeButton,g(p.rotate))):this.modeButton.setEnabled(!1));const e=this.model.appliedDeviceSize();this.widthInput.size=String(e.width),this.heightInput.size=this.model.type()===r.DeviceModeModel.Type.Responsive&&this.model.isFullHeight()?"":String(e.height),this.heightInput.placeholder=String(e.height),this.model.scale()!==this.cachedScale&&(this.scaleItem.setText(`${this.getPrettyZoomPercentage()}%`),this.cachedScale=this.model.scale());const t=this.model.appliedDeviceScaleFactor();t!==this.cachedDeviceScale&&(this.deviceScaleItem.setText(`DPR: ${t.toFixed(1)}`),this.cachedDeviceScale=t);const i=this.model.appliedUserAgentType();i!==this.cachedUaType&&(this.uaItem.setText(i),this.cachedUaType=i);let o=g(p.none);this.model.type()===r.DeviceModeModel.Type.Responsive&&(o=g(p.responsive));const s=this.model.device();if(this.model.type()===r.DeviceModeModel.Type.Device&&s&&(o=s.title),this.deviceSelectItem.setText(`${g(p.dimensions)}: ${o}`),this.model.device()!==this.cachedModelDevice){const e=this.model.device();if(e){const t=e?e.modes.length:0;this.modeButton.setEnabled(t>=2),v(this.modeButton,g(2===t?p.rotate:p.screenOrientationOptions))}this.cachedModelDevice=e}if(this.experimentDualScreenSupport&&this.experimentalButton){const e=this.model.device();e&&e.isDualScreen?(this.spanButton.setVisible(!0),this.experimentalButton.setVisible(!0)):(this.spanButton.setVisible(!1),this.experimentalButton.setVisible(!1)),v(this.spanButton,g(p.toggleDualscreenMode))}if(this.model.type()===r.DeviceModeModel.Type.Device&&this.lastMode.set(this.model.device(),this.model.mode()),this.model.mode()!==this.cachedModelMode&&this.model.type()!==r.DeviceModeModel.Type.None){this.cachedModelMode=this.model.mode();const e=this.persistenceSetting.get(),t=this.model.device();if(t){e.device=t.title;const i=this.model.mode();e.orientation=i?i.orientation:"",e.mode=i?i.title:""}else e.device="",e.orientation="",e.mode="";this.persistenceSetting.set(e)}}restore(){for(const e of this.allDevices())if(e.title===this.persistenceSetting.get().device)for(const t of e.modes)if(t.orientation===this.persistenceSetting.get().orientation&&t.title===this.persistenceSetting.get().mode)return this.lastMode.set(e,t),void this.emulateDevice(e);this.model.emulate(r.DeviceModeModel.Type.Responsive,null,null)}}var S=Object.freeze({__proto__:null,DeviceModeToolbar:b}),w={cssContent:".media-inspector-view{height:50px;--override-min-width-media-query-selector-background-color:rgb(255 204 128);--override-min-width-media-query-selector-background-color-inactive:rgb(255 243 224);--override-min-width-media-query-selector-marker-color:rgb(245 122 0);--override-min-and-max-width-media-query-selector-background-color:rgb(196 224 163);--override-min-and-max-width-media-query-selector-background-color-inactive:rgb(234 246 235);--override-min-and-max-width-media-query-selector-marker-color:rgb(104 159 56);--override-max-width-media-query-selector-background-color:rgb(144 202 249);--override-max-width-media-query-selector-background-color-inactive:rgb(225 245 254);--override-max-width-media-query-selector-marker-color:rgb(66 165 245)}.-theme-with-dark-background .media-inspector-view,\n:host-context(.-theme-with-dark-background) .media-inspector-view{--override-min-width-media-query-selector-background-color:rgb(127 76 0);--override-min-width-media-query-selector-background-color-inactive:rgb(31 19 0);--override-min-width-media-query-selector-marker-color:rgb(255 132 10);--override-min-and-max-width-media-query-selector-background-color:rgb(64 92 31);--override-min-and-max-width-media-query-selector-background-color-inactive:rgb(9 21 10);--override-min-and-max-width-media-query-selector-marker-color:rgb(144 199 96);--override-max-width-media-query-selector-background-color:rgb(6 64 111);--override-max-width-media-query-selector-background-color-inactive:rgb(1 21 30);--override-max-width-media-query-selector-marker-color:rgb(10 109 189)}.media-inspector-marker-container{height:14px;margin:2px 0;position:relative}.media-inspector-bar{display:flex;flex-direction:row;align-items:stretch;pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0}.media-inspector-marker{flex:none;pointer-events:auto;margin:1px 0;white-space:nowrap;z-index:auto;position:relative}.media-inspector-marker-spacer{flex:auto}.media-inspector-marker:hover{margin:-1px 0;opacity:100%}.media-inspector-marker-min-width{flex:auto;background-color:var(--override-min-width-media-query-selector-background-color);border-right:2px solid var(--override-min-width-media-query-selector-marker-color);border-left:2px solid var(--override-min-width-media-query-selector-marker-color)}.media-inspector-marker-min-width-right{border-left:2px solid var(--override-min-width-media-query-selector-marker-color)}.media-inspector-marker-min-width-left{border-right:2px solid var(--override-min-width-media-query-selector-marker-color)}.media-inspector-marker-min-max-width{background-color:var(--override-min-and-max-width-media-query-selector-background-color);border-left:2px solid var(--override-min-and-max-width-media-query-selector-marker-color);border-right:2px solid var(--override-min-and-max-width-media-query-selector-marker-color)}.media-inspector-marker-min-max-width:hover{z-index:1}.media-inspector-marker-max-width{background-color:var(--override-max-width-media-query-selector-background-color);border-right:2px solid var(--override-max-width-media-query-selector-marker-color);border-left:2px solid var(--override-max-width-media-query-selector-marker-color)}.media-inspector-marker-inactive .media-inspector-marker-min-width:not(:hover){background-color:var(--override-min-width-media-query-selector-background-color-inactive)}.media-inspector-marker-inactive .media-inspector-marker-min-max-width:not(:hover){background-color:var(--override-min-and-max-width-media-query-selector-background-color-inactive)}.media-inspector-marker-inactive .media-inspector-marker-max-width:not(:hover){background-color:var(--override-max-width-media-query-selector-background-color-inactive)}.media-inspector-marker-label-container{position:absolute;z-index:1}.media-inspector-marker:not(:hover) .media-inspector-marker-label-container{display:none}.media-inspector-marker-label-container-left{left:-2px}.media-inspector-marker-label-container-right{right:-2px}.media-inspector-marker-label{color:var(--color-text-primary);position:absolute;top:1px;bottom:0;font-size:12px;pointer-events:none}.media-inspector-label-right{right:4px}.media-inspector-label-left{left:4px}"};const M={revealInSourceCode:"Reveal in source code"},f=a.i18n.registerUIStrings("panels/emulation/MediaQueryInspector.ts",M),x=a.i18n.getLocalizedString.bind(void 0,f);class I extends t.Widget.Widget{mediaThrottler;getWidthCallback;setWidthCallback;scale;elementsToMediaQueryModel;elementsToCSSLocations;cssModel;cachedQueryModels;constructor(e,i,o){super(!0),this.registerRequiredCSS(w),this.contentElement.classList.add("media-inspector-view"),this.contentElement.addEventListener("click",this.onMediaQueryClicked.bind(this),!1),this.contentElement.addEventListener("contextmenu",this.onContextMenu.bind(this),!1),this.mediaThrottler=o,this.getWidthCallback=e,this.setWidthCallback=i,this.scale=1,this.elementsToMediaQueryModel=new WeakMap,this.elementsToCSSLocations=new WeakMap,s.TargetManager.TargetManager.instance().observeModels(s.CSSModel.CSSModel,this),t.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.renderMediaQueries.bind(this),this)}modelAdded(e){e.target()===s.TargetManager.TargetManager.instance().primaryPageTarget()&&(this.cssModel=e,this.cssModel.addEventListener(s.CSSModel.Events.StyleSheetAdded,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(s.CSSModel.Events.StyleSheetRemoved,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(s.CSSModel.Events.StyleSheetChanged,this.scheduleMediaQueriesUpdate,this),this.cssModel.addEventListener(s.CSSModel.Events.MediaQueryResultChanged,this.scheduleMediaQueriesUpdate,this))}modelRemoved(e){e===this.cssModel&&(this.cssModel.removeEventListener(s.CSSModel.Events.StyleSheetAdded,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(s.CSSModel.Events.StyleSheetRemoved,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(s.CSSModel.Events.StyleSheetChanged,this.scheduleMediaQueriesUpdate,this),this.cssModel.removeEventListener(s.CSSModel.Events.MediaQueryResultChanged,this.scheduleMediaQueriesUpdate,this),delete this.cssModel)}setAxisTransform(e){Math.abs(this.scale-e)<1e-8||(this.scale=e,this.renderMediaQueries())}onMediaQueryClicked(e){const t=e.target.enclosingNodeOrSelfWithClass("media-inspector-bar");if(!t)return;const i=this.elementsToMediaQueryModel.get(t);if(!i)return;const o=i.maxWidthExpression(),s=i.minWidthExpression();if(0===i.section())return void this.setWidthCallback(o&&o.computedLength()||0);if(2===i.section())return void this.setWidthCallback(s&&s.computedLength()||0);const r=this.getWidthCallback();s&&r!==s.computedLength()?this.setWidthCallback(s.computedLength()||0):this.setWidthCallback(o&&o.computedLength()||0)}onContextMenu(e){if(!this.cssModel||!this.cssModel.isEnabled())return;const i=e.target.enclosingNodeOrSelfWithClass("media-inspector-bar");if(!i)return;const o=this.elementsToCSSLocations.get(i)||[],s=new Map;for(let e=0;e<o.length;++e){const t=h.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(o[e]);if(!t)continue;const i="number"==typeof t.columnNumber?d.StringUtilities.sprintf("%s:%d:%d",t.uiSourceCode.url(),t.lineNumber+1,t.columnNumber+1):d.StringUtilities.sprintf("%s:%d",t.uiSourceCode.url(),t.lineNumber+1);s.set(i,t)}const r=[...s.keys()].sort(),n=new t.ContextMenu.ContextMenu(e),a=n.defaultSection().appendSubMenuItem(x(M.revealInSourceCode));for(let e=0;e<r.length;++e){const t=r[e];a.defaultSection().appendItem(t,this.revealSourceLocation.bind(this,s.get(t)))}n.show()}revealSourceLocation(e){n.Revealer.reveal(e)}scheduleMediaQueriesUpdate(){this.isShowing()&&this.mediaThrottler.schedule(this.refetchMediaQueries.bind(this))}refetchMediaQueries(){return this.isShowing()&&this.cssModel?this.cssModel.getMediaQueries().then(this.rebuildMediaQueries.bind(this)):Promise.resolve()}squashAdjacentEqual(e){const t=[];for(let i=0;i<e.length;++i){const o=t[t.length-1];o&&o.equals(e[i])||t.push(e[i])}return t}rebuildMediaQueries(e){let t=[];for(let i=0;i<e.length;++i){const o=e[i];if(o.mediaList)for(let e=0;e<o.mediaList.length;++e){const i=o.mediaList[e],s=k.createFromMediaQuery(o,i);s&&t.push(s)}}t.sort((function(e,t){return e.compareTo(t)})),t=this.squashAdjacentEqual(t);let i=this.cachedQueryModels&&this.cachedQueryModels.length===t.length;for(let e=0;i&&e<t.length;++e)i=i&&this.cachedQueryModels&&this.cachedQueryModels[e].equals(t[e]);i||(this.cachedQueryModels=t,this.renderMediaQueries())}renderMediaQueries(){if(!this.cachedQueryModels||!this.isShowing())return;const e=[];let t=null;for(let i=0;i<this.cachedQueryModels.length;++i){const o=this.cachedQueryModels[i];t&&t.model.dimensionsEqual(o)?t.active=t.active||o.active():(t={active:o.active(),model:o,locations:[]},e.push(t));const s=o.rawLocation();s&&t.locations.push(s)}this.contentElement.removeChildren();let i=null;for(let t=0;t<e.length;++t){t&&e[t].model.section()===e[t-1].model.section()||(i=this.contentElement.createChild("div","media-inspector-marker-container"));const o=e[t],s=this.createElementFromMediaQueryModel(o.model);if(this.elementsToMediaQueryModel.set(s,o.model),this.elementsToCSSLocations.set(s,o.locations),s.classList.toggle("media-inspector-marker-inactive",!o.active),!i)throw new Error("Could not find container to render media queries into.");i.appendChild(s)}}zoomFactor(){return t.ZoomManager.ZoomManager.instance().zoomFactor()/this.scale}wasShown(){super.wasShown(),this.scheduleMediaQueriesUpdate()}createElementFromMediaQueryModel(e){const i=this.zoomFactor(),o=e.minWidthExpression(),s=e.maxWidthExpression(),r=o?(o.computedLength()||0)/i:0,n=s?(s.computedLength()||0)/i:0,a=document.createElement("div");if(a.classList.add("media-inspector-bar"),0===e.section()){a.createChild("div","media-inspector-marker-spacer");const i=a.createChild("div","media-inspector-marker media-inspector-marker-max-width");i.style.width=n+"px",t.Tooltip.Tooltip.install(i,e.mediaText()),d(i,e.maxWidthExpression(),!1,!1),d(i,e.maxWidthExpression(),!0,!0),a.createChild("div","media-inspector-marker-spacer")}if(1===e.section()){a.createChild("div","media-inspector-marker-spacer");const i=a.createChild("div","media-inspector-marker media-inspector-marker-min-max-width");i.style.width=.5*(n-r)+"px",t.Tooltip.Tooltip.install(i,e.mediaText()),d(i,e.maxWidthExpression(),!0,!1),d(i,e.minWidthExpression(),!1,!0),a.createChild("div","media-inspector-marker-spacer").style.flex="0 0 "+r+"px";const o=a.createChild("div","media-inspector-marker media-inspector-marker-min-max-width");o.style.width=.5*(n-r)+"px",t.Tooltip.Tooltip.install(o,e.mediaText()),d(o,e.minWidthExpression(),!0,!1),d(o,e.maxWidthExpression(),!1,!0),a.createChild("div","media-inspector-marker-spacer")}if(2===e.section()){const i=a.createChild("div","media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left");t.Tooltip.Tooltip.install(i,e.mediaText()),d(i,e.minWidthExpression(),!1,!1),a.createChild("div","media-inspector-marker-spacer").style.flex="0 0 "+r+"px";const o=a.createChild("div","media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right");t.Tooltip.Tooltip.install(o,e.mediaText()),d(o,e.minWidthExpression(),!0,!0)}function d(e,t,i,o){t&&(e.createChild("div","media-inspector-marker-label-container "+(i?"media-inspector-marker-label-container-left":"media-inspector-marker-label-container-right")).createChild("span","media-inspector-marker-label "+(o?"media-inspector-label-left":"media-inspector-label-right")).textContent=t.value()+t.unit())}return a}}class k{cssMedia;minWidthExpressionInternal;maxWidthExpressionInternal;activeInternal;sectionInternal;rawLocationInternal;constructor(e,t,i,o){this.cssMedia=e,this.minWidthExpressionInternal=t,this.maxWidthExpressionInternal=i,this.activeInternal=o,this.sectionInternal=i&&!t?0:t&&i?1:2}static createFromMediaQuery(e,t){let i=null,o=Number.MAX_VALUE,s=null,r=Number.MIN_VALUE;const n=t.expressions();if(!n)return null;for(let e=0;e<n.length;++e){const t=n[e],a=t.feature();if(-1===a.indexOf("width"))continue;const d=t.computedLength();a.startsWith("max-")&&d&&d<o?(i=t,o=d):a.startsWith("min-")&&d&&d>r&&(s=t,r=d)}return r>o||!i&&!s?null:new k(e,s,i,t.active())}equals(e){return 0===this.compareTo(e)}dimensionsEqual(e){const t=this.minWidthExpression(),i=e.minWidthExpression(),o=this.maxWidthExpression(),s=e.maxWidthExpression(),r=this.section()===e.section(),n=!t||t.computedLength()===i?.computedLength(),a=!o||o.computedLength()===s?.computedLength();return r&&n&&a}compareTo(e){if(this.section()!==e.section())return this.section()-e.section();if(this.dimensionsEqual(e)){const t=this.rawLocation(),i=e.rawLocation();return t||i?t&&!i?1:!t&&i?-1:this.active()!==e.active()?this.active()?-1:1:t&&i?d.StringUtilities.compare(t.url,i.url)||t.lineNumber-i.lineNumber||t.columnNumber-i.columnNumber:0:d.StringUtilities.compare(this.mediaText(),e.mediaText())}const t=this.maxWidthExpression(),i=e.maxWidthExpression(),o=t&&t.computedLength()||0,s=i&&i.computedLength()||0,r=this.minWidthExpression(),n=e.minWidthExpression(),a=r&&r.computedLength()||0,l=n&&n.computedLength()||0;return 0===this.section()?s-o:2===this.section()?a-l:a-l||s-o}section(){return this.sectionInternal}mediaText(){return this.cssMedia.text||""}rawLocation(){return this.rawLocationInternal||(this.rawLocationInternal=this.cssMedia.rawLocation()),this.rawLocationInternal}minWidthExpression(){return this.minWidthExpressionInternal}maxWidthExpression(){return this.maxWidthExpressionInternal}active(){return this.activeInternal}}var y=Object.freeze({__proto__:null,MediaQueryInspector:I,MediaQueryUIModel:k}),T={cssContent:":host{overflow:hidden;align-items:stretch;flex:auto;background-color:var(--color-background-elevation-0)}.device-mode-toolbar{flex:none;background-color:var(--color-background-elevation-0);border-bottom:1px solid var(--color-details-hairline);display:flex;flex-direction:row;align-items:stretch}.device-mode-toolbar .toolbar{overflow:hidden;flex:0 100000 auto;padding:0 5px}.device-mode-toolbar .toolbar.device-mode-toolbar-fixed-size{flex:0 1 auto}.device-mode-toolbar-options.toolbar{position:sticky;right:0;flex:none}.device-mode-toolbar-spacer{flex:1 1 0;display:flex;flex-direction:row;overflow:hidden}.device-mode-content-clip{overflow:hidden;flex:auto}.device-mode-media-container{flex:none;overflow:hidden;box-shadow:inset 0 -1px var(--color-details-hairline)}.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-media-container{margin-bottom:20px}.device-mode-presets-container{flex:0 0 20px;display:flex}.device-mode-presets-container-inner{flex:auto;justify-content:center;position:relative;background-color:var(--color-background-elevation-2);border:2px solid var(--color-background-elevation-0);border-bottom:2px solid var(--color-background-elevation-0)}.device-mode-presets-container:hover{transition:opacity 0.1s;transition-delay:50ms;opacity:100%}.device-mode-preset-bar-outer{pointer-events:none;display:flex;justify-content:center}.device-mode-preset-bar{border-left:2px solid var(--color-background-elevation-0);border-right:2px solid var(--color-background-elevation-0);pointer-events:auto;text-align:center;flex:none;color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;white-space:nowrap;margin-bottom:1px}.device-mode-preset-bar:hover{transition:background-color 0.1s;transition-delay:50ms;background-color:var(--color-background-highlight)}.device-mode-preset-bar > span{visibility:hidden}.device-mode-preset-bar:hover > span{transition:visibility 0.1s;transition-delay:50ms;visibility:visible}.device-mode-content-area{flex:auto;position:relative;margin:0}.device-mode-screen-area{position:absolute;left:0;right:0;width:0;height:0;background-color:var(--color-background-inverted)}.device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area{--override-screen-area-box-shadow:hsl(240deg 3% 84%) 0 0 0 0.5px,hsl(0deg 0% 80%/40%) 0 0 20px;box-shadow:var(--override-screen-area-box-shadow)}.-theme-with-dark-background .device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area,\n:host-context(.-theme-with-dark-background) .device-mode-content-clip:not(.device-mode-outline-visible) .device-mode-screen-area{--override-screen-area-box-shadow:rgb(40 40 42) 0 0 0 0.5px,rgb(51 51 51/40%) 0 0 20px}.device-mode-screen-image{position:absolute;left:0;top:0;width:100%;height:100%}.device-mode-resizer{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background-color 0.1s ease,opacity 0.1s ease}.device-mode-resizer:hover{background-color:var(--color-background-elevation-2);opacity:100%}.device-mode-resizer > div{pointer-events:none}.device-mode-right-resizer{top:0;bottom:-1px;right:-20px;width:20px}.device-mode-left-resizer{top:0;bottom:-1px;left:-20px;width:20px;opacity:0%}.device-mode-bottom-resizer{left:0;right:-1px;bottom:-20px;height:20px}.device-mode-bottom-right-resizer{left:0;top:0;right:-20px;bottom:-20px;background-color:var(--color-background-elevation-1)}.device-mode-bottom-left-resizer{left:-20px;top:0;right:0;bottom:-20px;opacity:0%}.device-mode-right-resizer > div{content:var(--image-file-resizeHorizontal);width:6px;height:26px}.device-mode-left-resizer > div{content:var(--image-file-resizeHorizontal);width:6px;height:26px}.device-mode-bottom-resizer > div{content:var(--image-file-resizeVertical);margin-bottom:-2px;width:26px;height:6px}.device-mode-bottom-right-resizer > div{position:absolute;bottom:3px;right:3px;width:13px;height:13px;content:var(--image-file-resizeDiagonal)}.device-mode-bottom-left-resizer > div{position:absolute;bottom:3px;left:3px;width:13px;height:13px;content:var(--image-file-resizeDiagonal);transform:rotate(90deg)}.device-mode-page-area{position:absolute;left:0;right:0;width:0;height:0;display:flex;background-color:var(--color-background-elevation-0)}.device-mode-ruler{position:absolute;overflow:visible}.device-mode-ruler-top{height:20px;right:0}.device-mode-ruler-left{width:20px;bottom:0}.device-mode-ruler-content{pointer-events:none;position:absolute;left:-20px;top:-20px;--override-device-ruler-border-color:hsl(0deg 0% 50%)}.device-mode-ruler-top .device-mode-ruler-content{border-top:1px solid transparent;right:0;bottom:20px;background-color:var(--color-background-opacity-80)}.device-mode-ruler-left .device-mode-ruler-content{border-left:1px solid transparent;border-top:1px solid transparent;right:20px;bottom:0}.-theme-with-dark-background .device-mode-ruler-content,\n:host-context(.-theme-with-dark-background) .device-mode-ruler-content{--override-device-ruler-border-color:rgb(127 127 127)}.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-top .device-mode-ruler-content{border-top:1px solid var(--override-device-ruler-border-color)}.device-mode-content-clip.device-mode-outline-visible .device-mode-ruler-left .device-mode-ruler-content{border-left:1px solid var(--override-device-ruler-border-color);border-top:1px solid var(--override-device-ruler-border-color)}.device-mode-ruler-inner{position:absolute}.device-mode-ruler-top .device-mode-ruler-inner{top:0;bottom:0;left:20px;right:0;border-bottom:1px solid var(--override-device-ruler-border-color)}.device-mode-ruler-left .device-mode-ruler-inner{left:0;right:0;top:19px;bottom:0;border-right:1px solid var(--override-device-ruler-border-color);background-color:var(--color-background-opacity-80)}.device-mode-ruler-marker{position:absolute}.device-mode-ruler-top .device-mode-ruler-marker{width:0;height:5px;bottom:0;border-right:1px solid var(--override-device-ruler-border-color);margin-right:-1px}.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-medium{height:10px}.device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-large{height:15px}.device-mode-ruler-left .device-mode-ruler-marker{height:0;width:5px;right:0;border-bottom:1px solid var(--override-device-ruler-border-color);margin-bottom:-1px}.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-medium{width:10px}.device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-large{width:15px}.device-mode-ruler-text{color:var(--color-text-secondary);position:relative;pointer-events:auto}.device-mode-ruler-text:hover{color:var(--color-text-primary)}.device-mode-ruler-top .device-mode-ruler-text{left:2px;top:-2px}.device-mode-ruler-left .device-mode-ruler-text{left:-4px;top:-15px;transform:rotate(270deg)}"};const C={doubleclickForFullHeight:"Double-click for full height",mobileS:"Mobile S",mobileM:"Mobile M",mobileL:"Mobile L",tablet:"Tablet",laptop:"Laptop",laptopL:"Laptop L"},E=a.i18n.registerUIStrings("panels/emulation/DeviceModeView.ts",C),D=a.i18n.getLocalizedString.bind(void 0,E);class R extends t.Widget.VBox{wrapperInstance;blockElementToWidth;model;mediaInspector;showMediaInspectorSetting;showRulersSetting;topRuler;leftRuler;presetBlocks;responsivePresetsContainer;screenArea;pageArea;outlineImage;contentClip;contentArea;rightResizerElement;leftResizerElement;bottomResizerElement;bottomRightResizerElement;bottomLeftResizerElement;cachedResizable;mediaInspectorContainer;screenImage;toolbar;slowPositionStart;resizeStart;cachedCssScreenRect;cachedCssVisiblePageRect;cachedOutlineRect;cachedMediaInspectorVisible;cachedShowRulers;cachedScale;handleWidth;handleHeight;constructor(){super(!0),this.blockElementToWidth=new WeakMap,this.setMinimumSize(150,150),this.element.classList.add("device-mode-view"),this.registerRequiredCSS(T),this.model=r.DeviceModeModel.DeviceModeModel.instance(),this.model.addEventListener("Updated",this.updateUI,this),this.mediaInspector=new I((()=>this.model.appliedDeviceSize().width),this.model.setWidth.bind(this.model),new n.Throttler.Throttler(0)),this.showMediaInspectorSetting=n.Settings.Settings.instance().moduleSetting("showMediaQueryInspector"),this.showMediaInspectorSetting.addChangeListener(this.updateUI,this),this.showRulersSetting=n.Settings.Settings.instance().moduleSetting("emulation.showRulers"),this.showRulersSetting.addChangeListener(this.updateUI,this),this.topRuler=new z(!0,this.model.setWidthAndScaleToFit.bind(this.model)),this.topRuler.element.classList.add("device-mode-ruler-top"),this.leftRuler=new z(!1,this.model.setHeightAndScaleToFit.bind(this.model)),this.leftRuler.element.classList.add("device-mode-ruler-left"),this.createUI(),t.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.zoomChanged,this)}createUI(){this.toolbar=new b(this.model,this.showMediaInspectorSetting,this.showRulersSetting),this.contentElement.appendChild(this.toolbar.element()),this.contentClip=this.contentElement.createChild("div","device-mode-content-clip vbox"),this.responsivePresetsContainer=this.contentClip.createChild("div","device-mode-presets-container"),this.populatePresetsContainer(),this.mediaInspectorContainer=this.contentClip.createChild("div","device-mode-media-container"),this.contentArea=this.contentClip.createChild("div","device-mode-content-area"),this.outlineImage=this.contentArea.createChild("img","device-mode-outline-image hidden fill"),this.outlineImage.addEventListener("load",this.onImageLoaded.bind(this,this.outlineImage,!0),!1),this.outlineImage.addEventListener("error",this.onImageLoaded.bind(this,this.outlineImage,!1),!1),this.screenArea=this.contentArea.createChild("div","device-mode-screen-area"),this.screenImage=this.screenArea.createChild("img","device-mode-screen-image hidden"),this.screenImage.addEventListener("load",this.onImageLoaded.bind(this,this.screenImage,!0),!1),this.screenImage.addEventListener("error",this.onImageLoaded.bind(this,this.screenImage,!1),!1),this.bottomRightResizerElement=this.screenArea.createChild("div","device-mode-resizer device-mode-bottom-right-resizer"),this.bottomRightResizerElement.createChild("div",""),this.createResizer(this.bottomRightResizerElement,2,1),this.bottomLeftResizerElement=this.screenArea.createChild("div","device-mode-resizer device-mode-bottom-left-resizer"),this.bottomLeftResizerElement.createChild("div",""),this.createResizer(this.bottomLeftResizerElement,-2,1),this.rightResizerElement=this.screenArea.createChild("div","device-mode-resizer device-mode-right-resizer"),this.rightResizerElement.createChild("div",""),this.createResizer(this.rightResizerElement,2,0),this.leftResizerElement=this.screenArea.createChild("div","device-mode-resizer device-mode-left-resizer"),this.leftResizerElement.createChild("div",""),this.createResizer(this.leftResizerElement,-2,0),this.bottomResizerElement=this.screenArea.createChild("div","device-mode-resizer device-mode-bottom-resizer"),this.bottomResizerElement.createChild("div",""),this.createResizer(this.bottomResizerElement,0,1),this.bottomResizerElement.addEventListener("dblclick",this.model.setHeight.bind(this.model,0),!1),t.Tooltip.Tooltip.install(this.bottomResizerElement,D(C.doubleclickForFullHeight)),this.pageArea=this.screenArea.createChild("div","device-mode-page-area"),this.pageArea.createChild("slot")}populatePresetsContainer(){const e=[320,375,425,768,1024,1440,2560],t=[D(C.mobileS),D(C.mobileM),D(C.mobileL),D(C.tablet),D(C.laptop),D(C.laptopL),"4K"];this.presetBlocks=[];const i=this.responsivePresetsContainer.createChild("div","device-mode-presets-container-inner");for(let s=e.length-1;s>=0;--s){const r=i.createChild("div","fill device-mode-preset-bar-outer").createChild("div","device-mode-preset-bar");r.createChild("span").textContent=t[s]+" – "+e[s]+"px",r.addEventListener("click",o.bind(this,e[s]),!1),this.blockElementToWidth.set(r,e[s]),this.presetBlocks.push(r)}function o(e,t){this.model.emulate(r.DeviceModeModel.Type.Responsive,null,null),this.model.setWidthAndScaleToFit(e),t.consume()}}createResizer(e,i,o){const s=new t.ResizerWidget.ResizerWidget;s.addElement(e);let r=i?"ew-resize":"ns-resize";return i*o>0&&(r="nwse-resize"),i*o<0&&(r="nesw-resize"),s.setCursor(r),s.addEventListener(t.ResizerWidget.Events.ResizeStart,this.onResizeStart,this),s.addEventListener(t.ResizerWidget.Events.ResizeUpdateXY,this.onResizeUpdate.bind(this,i,o)),s.addEventListener(t.ResizerWidget.Events.ResizeEnd,this.onResizeEnd,this),s}onResizeStart(){this.slowPositionStart=null;const e=this.model.screenRect();this.resizeStart=new t.Geometry.Size(e.width,e.height)}onResizeUpdate(e,i,o){o.data.shiftKey!==Boolean(this.slowPositionStart)&&(this.slowPositionStart=o.data.shiftKey?{x:o.data.currentX,y:o.data.currentY}:null);let s=o.data.currentX-o.data.startX,n=o.data.currentY-o.data.startY;if(this.slowPositionStart&&(s=(o.data.currentX-this.slowPositionStart.x)/10+this.slowPositionStart.x-o.data.startX,n=(o.data.currentY-this.slowPositionStart.y)/10+this.slowPositionStart.y-o.data.startY),e&&this.resizeStart){const i=s*t.ZoomManager.ZoomManager.instance().zoomFactor();let o=this.resizeStart.width+i*e;o=Math.round(o/this.model.scale()),o>=r.DeviceModeModel.MinDeviceSize&&o<=r.DeviceModeModel.MaxDeviceSize&&this.model.setWidth(o)}if(i&&this.resizeStart){const e=n*t.ZoomManager.ZoomManager.instance().zoomFactor();let o=this.resizeStart.height+e*i;o=Math.round(o/this.model.scale()),o>=r.DeviceModeModel.MinDeviceSize&&o<=r.DeviceModeModel.MaxDeviceSize&&this.model.setHeight(o)}}exitHingeMode(){this.model&&this.model.exitHingeMode()}onResizeEnd(){delete this.resizeStart,e.userMetrics.actionTaken(e.UserMetrics.Action.ResizedViewInResponsiveMode)}updateUI(){function e(e,t){e.style.left=t.left+"px",e.style.top=t.top+"px",e.style.width=t.width+"px",e.style.height=t.height+"px"}if(!this.isShowing())return;const i=t.ZoomManager.ZoomManager.instance().zoomFactor();let o=!1;const s=this.showRulersSetting.get()&&this.model.type()!==r.DeviceModeModel.Type.None;let n=!1,a=!1;const d=this.model.screenRect().scale(1/i);this.cachedCssScreenRect&&d.isEqual(this.cachedCssScreenRect)||(e(this.screenArea,d),a=!0,o=!0,this.cachedCssScreenRect=d);const l=this.model.visiblePageRect().scale(1/i);this.cachedCssVisiblePageRect&&l.isEqual(this.cachedCssVisiblePageRect)||(e(this.pageArea,l),o=!0,this.cachedCssVisiblePageRect=l);const c=this.model.outlineRect();if(c){const t=c.scale(1/i);this.cachedOutlineRect&&t.isEqual(this.cachedOutlineRect)||(e(this.outlineImage,t),o=!0,this.cachedOutlineRect=t)}this.contentClip.classList.toggle("device-mode-outline-visible",Boolean(this.model.outlineImage()));const h=this.model.type()===r.DeviceModeModel.Type.Responsive;h!==this.cachedResizable&&(this.rightResizerElement.classList.toggle("hidden",!h),this.leftResizerElement.classList.toggle("hidden",!h),this.bottomResizerElement.classList.toggle("hidden",!h),this.bottomRightResizerElement.classList.toggle("hidden",!h),this.bottomLeftResizerElement.classList.toggle("hidden",!h),this.cachedResizable=h);const m=this.showMediaInspectorSetting.get()&&this.model.type()!==r.DeviceModeModel.Type.None;if(m!==this.cachedMediaInspectorVisible&&(m?this.mediaInspector.show(this.mediaInspectorContainer):this.mediaInspector.detach(),n=!0,o=!0,this.cachedMediaInspectorVisible=m),s!==this.cachedShowRulers&&(this.contentClip.classList.toggle("device-mode-rulers-visible",s),s?(this.topRuler.show(this.contentArea),this.leftRuler.show(this.contentArea)):(this.topRuler.detach(),this.leftRuler.detach()),n=!0,o=!0,this.cachedShowRulers=s),this.model.scale()!==this.cachedScale){a=!0,o=!0;for(const e of this.presetBlocks){const t=this.blockElementToWidth.get(e);if(!t)throw new Error("Could not get width for block.");e.style.width=t*this.model.scale()+"px"}this.cachedScale=this.model.scale()}this.toolbar.update(),this.loadImage(this.screenImage,this.model.screenImage()),this.loadImage(this.outlineImage,this.model.outlineImage()),this.mediaInspector.setAxisTransform(this.model.scale()),o&&this.doResize(),a&&(this.topRuler.render(this.model.scale()),this.leftRuler.render(this.model.scale()),this.topRuler.element.positionAt(this.cachedCssScreenRect?this.cachedCssScreenRect.left:0,this.cachedCssScreenRect?this.cachedCssScreenRect.top:0),this.leftRuler.element.positionAt(this.cachedCssScreenRect?this.cachedCssScreenRect.left:0,this.cachedCssScreenRect?this.cachedCssScreenRect.top:0)),n&&this.contentAreaResized()}loadImage(e,t){e.getAttribute("srcset")!==t&&(e.setAttribute("srcset",t),t||e.classList.toggle("hidden",!0))}onImageLoaded(e,t){e.classList.toggle("hidden",!t)}setNonEmulatedAvailableSize(e){if(this.model.type()!==r.DeviceModeModel.Type.None)return;const i=t.ZoomManager.ZoomManager.instance().zoomFactor(),o=e.getBoundingClientRect(),s=new t.Geometry.Size(Math.max(o.width*i,1),Math.max(o.height*i,1));this.model.setAvailableSize(s,s)}contentAreaResized(){const e=t.ZoomManager.ZoomManager.instance().zoomFactor(),i=this.contentArea.getBoundingClientRect(),o=new t.Geometry.Size(Math.max(i.width*e,1),Math.max(i.height*e,1)),s=new t.Geometry.Size(Math.max((i.width-2*(this.handleWidth||0))*e,1),Math.max((i.height-(this.handleHeight||0))*e,1));this.model.setAvailableSize(o,s)}measureHandles(){const e=this.rightResizerElement.classList.contains("hidden");this.rightResizerElement.classList.toggle("hidden",!1),this.bottomResizerElement.classList.toggle("hidden",!1),this.handleWidth=this.rightResizerElement.offsetWidth,this.handleHeight=this.bottomResizerElement.offsetHeight,this.rightResizerElement.classList.toggle("hidden",e),this.bottomResizerElement.classList.toggle("hidden",e)}zoomChanged(){delete this.handleWidth,delete this.handleHeight,this.isShowing()&&(this.measureHandles(),this.contentAreaResized())}onResize(){this.isShowing()&&this.contentAreaResized()}wasShown(){this.measureHandles(),this.toolbar.restore()}willHide(){this.model.emulate(r.DeviceModeModel.Type.None,null,null)}async captureScreenshot(){const e=await this.model.captureScreenshot(!1);if(null===e)return;const t=new Image;t.src="data:image/png;base64,"+e,t.onload=async()=>{const e=t.naturalWidth/this.model.screenRect().width,i=this.model.outlineRect();if(!i)throw new Error("Unable to take screenshot: no outlineRect available.");const o=i.scale(e),s=this.model.screenRect().scale(e),r=this.model.visiblePageRect().scale(e),n=s.left+r.left-o.left,a=s.top+r.top-o.top,d=document.createElement("canvas");d.width=Math.floor(o.width),d.height=Math.min(16384,Math.floor(o.height));const l=d.getContext("2d");if(!l)throw new Error("Could not get 2d context from canvas.");l.imageSmoothingEnabled=!1,this.model.outlineImage()&&await this.paintImage(l,this.model.outlineImage(),o.relativeTo(o)),this.model.screenImage()&&await this.paintImage(l,this.model.screenImage(),s.relativeTo(o)),l.drawImage(t,Math.floor(n),Math.floor(a)),this.saveScreenshot(d)}}async captureFullSizeScreenshot(){const e=await this.model.captureScreenshot(!0);if(null!==e)return this.saveScreenshotBase64(e)}async captureAreaScreenshot(e){const t=await this.model.captureScreenshot(!1,e);if(null!==t)return this.saveScreenshotBase64(t)}saveScreenshotBase64(e){const t=new Image;t.src="data:image/png;base64,"+e,t.onload=()=>{const e=document.createElement("canvas");e.width=t.naturalWidth,e.height=Math.min(16384,Math.floor(t.naturalHeight));const i=e.getContext("2d");if(!i)throw new Error("Could not get 2d context for base64 screenshot.");i.imageSmoothingEnabled=!1,i.drawImage(t,0,0),this.saveScreenshot(e)}}paintImage(e,t,i){return new Promise((o=>{const s=new Image;s.crossOrigin="Anonymous",s.srcset=t,s.onerror=()=>o(),s.onload=()=>{e.drawImage(s,i.left,i.top,i.width,i.height),o()}}))}saveScreenshot(e){const t=this.model.inspectedURL();let i="";if(t){const e=d.StringUtilities.removeURLFragment(t);i=d.StringUtilities.trimURL(e)}const o=this.model.device();o&&this.model.type()===r.DeviceModeModel.Type.Device&&(i+=`(${o.title})`);const s=document.createElement("a");s.download=i+".png",e.toBlob((e=>{null!==e&&(s.href=URL.createObjectURL(e),s.click())}))}}class z extends t.Widget.VBox{contentElementInternal;horizontal;scale;count;throttler;applyCallback;renderedScale;renderedZoomFactor;constructor(e,t){super(),this.element.classList.add("device-mode-ruler"),this.contentElementInternal=this.element.createChild("div","device-mode-ruler-content").createChild("div","device-mode-ruler-inner"),this.horizontal=e,this.scale=1,this.count=0,this.throttler=new n.Throttler.Throttler(0),this.applyCallback=t}render(e){this.scale=e,this.throttler.schedule(this.update.bind(this))}onResize(){this.throttler.schedule(this.update.bind(this))}update(){const e=t.ZoomManager.ZoomManager.instance().zoomFactor(),i=this.horizontal?this.contentElementInternal.offsetWidth:this.contentElementInternal.offsetHeight;this.scale===this.renderedScale&&e===this.renderedZoomFactor||(this.contentElementInternal.removeChildren(),this.count=0,this.renderedScale=this.scale,this.renderedZoomFactor=e);const o=i*e/this.scale,s=Math.ceil(o/5);let r=1;this.scale<.8&&(r=2),this.scale<.6&&(r=4),this.scale<.4&&(r=8),this.scale<.2&&(r=16),this.scale<.1&&(r=32);for(let e=s;e<this.count;e++)if(!(e%r)){const e=this.contentElementInternal.lastChild;e&&e.remove()}for(let t=this.count;t<s;t++){if(t%r)continue;const i=this.contentElementInternal.createChild("div","device-mode-ruler-marker");if(t&&(this.horizontal?i.style.left=5*t*this.scale/e+"px":i.style.top=5*t*this.scale/e+"px",!(t%20))){const e=i.createChild("div","device-mode-ruler-text");e.textContent=String(5*t),e.addEventListener("click",this.onMarkerClick.bind(this,5*t),!1)}t%10?t%5||i.classList.add("device-mode-ruler-marker-medium"):i.classList.add("device-mode-ruler-marker-large")}return this.count=s,Promise.resolve()}onMarkerClick(e){this.applyCallback.call(null,e)}}var L=Object.freeze({__proto__:null,DeviceModeView:R,Ruler:z});let W,A;class P extends t.Widget.VBox{inspectedPagePlaceholder;deviceModeView;toggleDeviceModeAction;showDeviceModeSetting;constructor(e){super(),this.inspectedPagePlaceholder=e,this.deviceModeView=null,this.toggleDeviceModeAction=t.ActionRegistry.ActionRegistry.instance().action("emulation.toggle-device-mode");const i=r.DeviceModeModel.DeviceModeModel.instance();this.showDeviceModeSetting=i.enabledSetting(),this.showDeviceModeSetting.setRequiresUserAction(Boolean(o.Runtime.Runtime.queryParam("hasOtherClients"))),this.showDeviceModeSetting.addChangeListener(this.update.bind(this,!1)),s.TargetManager.TargetManager.instance().addModelListener(s.OverlayModel.OverlayModel,s.OverlayModel.Events.ScreenshotRequested,this.screenshotRequestedFromOverlay,this),this.update(!0)}static instance(e={forceNew:null,inspectedPagePlaceholder:null}){const{forceNew:t,inspectedPagePlaceholder:i}=e;if(!W||t){if(!i)throw new Error(`Unable to create DeviceModeWrapper: inspectedPagePlaceholder must be provided: ${(new Error).stack}`);W=new P(i)}return W}toggleDeviceMode(){this.showDeviceModeSetting.set(!this.showDeviceModeSetting.get())}isDeviceModeOn(){return this.showDeviceModeSetting.get()}captureScreenshot(e,t){return this.deviceModeView||(this.deviceModeView=new R),this.deviceModeView.setNonEmulatedAvailableSize(this.inspectedPagePlaceholder.element),e?this.deviceModeView.captureFullSizeScreenshot():t?this.deviceModeView.captureAreaScreenshot(t):this.deviceModeView.captureScreenshot(),!0}screenshotRequestedFromOverlay(e){const t=e.data;this.captureScreenshot(!1,t)}update(e){if(this.toggleDeviceModeAction&&this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get()),!e){const e=this.deviceModeView&&this.deviceModeView.isShowing();if(this.showDeviceModeSetting.get()===e)return}this.showDeviceModeSetting.get()?(this.deviceModeView||(this.deviceModeView=new R),this.deviceModeView.show(this.element),this.inspectedPagePlaceholder.clearMinimumSize(),this.inspectedPagePlaceholder.show(this.deviceModeView.element)):(this.deviceModeView&&(this.deviceModeView.exitHingeMode(),this.deviceModeView.detach()),this.inspectedPagePlaceholder.restoreMinimumSize(),this.inspectedPagePlaceholder.show(this.element))}}class F{handleAction(e,i){if(P.instance())switch(i){case"emulation.capture-screenshot":return P.instance().captureScreenshot();case"emulation.capture-node-screenshot":{const e=t.Context.Context.instance().flavor(s.DOMModel.DOMNode);if(!e)return!0;async function i(){if(!e)return;const t=await e.resolveToObject();if(!t)return;const i=await t.callFunction((function(){const e=this.getBoundingClientRect(),t=this.ownerDocument.documentElement.getBoundingClientRect();return JSON.stringify({x:e.left-t.left,y:e.top-t.top,width:e.width,height:e.height,scale:1})}));if(!i.object)throw new Error("Clipping error: could not get object data.");const o=JSON.parse(i.object.value),s=await e.domModel().target().pageAgent().invoke_getLayoutMetrics(),r=!s.getError()&&s.visualViewport.zoom||1;o.x*=r,o.y*=r,o.width*=r,o.height*=r,P.instance().captureScreenshot(!1,o)}return i(),!0}case"emulation.capture-full-height-screenshot":return P.instance().captureScreenshot(!0);case"emulation.toggle-device-mode":return P.instance().toggleDeviceMode(),!0}return!1}static instance(e={forceNew:null}){const{forceNew:t}=e;return A&&!t||(A=new F),A}}var U=Object.freeze({__proto__:null,DeviceModeWrapper:P,ActionDelegate:F}),V={cssContent:":host{background-color:var(--color-background)}"};let B;class q extends(n.ObjectWrapper.eventMixin(t.Widget.Widget)){updateId;constructor(){super(!0),this.registerRequiredCSS(V),t.ZoomManager.ZoomManager.instance().addEventListener("ZoomChanged",this.onResize,this),this.restoreMinimumSize()}static instance(e={forceNew:null}){const{forceNew:t}=e;return B&&!t||(B=new q),B}onResize(){this.updateId&&this.element.window().cancelAnimationFrame(this.updateId),this.updateId=this.element.window().requestAnimationFrame(this.update.bind(this,!1))}restoreMinimumSize(){this.setMinimumSize(150,150)}clearMinimumSize(){this.setMinimumSize(1,1)}dipPageRect(){const e=t.ZoomManager.ZoomManager.instance().zoomFactor(),i=this.element.getBoundingClientRect(),o=this.element.ownerDocument.body.getBoundingClientRect(),s=Math.max(i.left*e,o.left*e),r=Math.max(i.top*e,o.top*e),n=Math.min(i.bottom*e,o.bottom*e);return{x:s,y:r,width:Math.min(i.right*e,o.right*e)-s,height:n-r}}update(e){delete this.updateId;const t=this.dipPageRect(),i={x:Math.round(t.x),y:Math.round(t.y),height:Math.max(1,Math.round(t.height)),width:Math.max(1,Math.round(t.width))};e&&(--i.height,this.dispatchEventToListeners("Update",i),++i.height),this.dispatchEventToListeners("Update",i)}}var Q=Object.freeze({__proto__:null,InspectedPagePlaceholder:q});let O,j;class H{rootSplitWidget;deviceModeView;inspectedPagePlaceholder;toolboxWindow;toolboxRootView;changingDockSide;constructor(){t.DockController.DockController.instance().addEventListener("BeforeDockSideChanged",this.openToolboxWindow,this)}static instance(){return O||(O=new H),O}presentUI(e){const i=new t.RootView.RootView;this.rootSplitWidget=new t.SplitWidget.SplitWidget(!1,!0,"InspectorView.splitViewState",555,300,!0),this.rootSplitWidget.show(i.element),this.rootSplitWidget.setSidebarWidget(t.InspectorView.InspectorView.instance()),this.rootSplitWidget.setDefaultFocusedChild(t.InspectorView.InspectorView.instance()),t.InspectorView.InspectorView.instance().setOwnerSplit(this.rootSplitWidget),this.inspectedPagePlaceholder=q.instance(),this.inspectedPagePlaceholder.addEventListener("Update",this.onSetInspectedPageBounds.bind(this),this),this.deviceModeView=P.instance({inspectedPagePlaceholder:this.inspectedPagePlaceholder,forceNew:!1}),t.DockController.DockController.instance().addEventListener("BeforeDockSideChanged",this.onBeforeDockSideChange,this),t.DockController.DockController.instance().addEventListener("DockSideChanged",this.onDockSideChange,this),t.DockController.DockController.instance().addEventListener("AfterDockSideChanged",this.onAfterDockSideChange,this),this.onDockSideChange(),console.timeStamp("AdvancedApp.attachToBody"),i.attachToDocument(e),i.focus(),this.inspectedPagePlaceholder.update()}openToolboxWindow(e){if("undocked"!==e.data.to)return;if(this.toolboxWindow)return;const t=window.location.href.replace("devtools_app.html","device_mode_emulation_frame.html");this.toolboxWindow=window.open(t,void 0)}deviceModeEmulationFrameLoaded(e){i.ThemeSupport.instance().applyTheme(e),i.ThemeSupport.instance().addEventListener(i.ThemeChangeEvent.eventName,(()=>{i.ThemeSupport.instance().applyTheme(e)})),t.UIUtils.initializeUIUtils(e),t.UIUtils.installComponentRootStyles(e.body),t.ContextMenu.ContextMenu.installHandler(e),this.toolboxRootView=new t.RootView.RootView,this.toolboxRootView.attachToDocument(e),this.updateDeviceModeView()}updateDeviceModeView(){this.isDocked()?this.rootSplitWidget.setMainWidget(this.deviceModeView):this.toolboxRootView&&this.deviceModeView.show(this.toolboxRootView.element)}onBeforeDockSideChange(e){"undocked"===e.data.to&&this.toolboxRootView&&(this.rootSplitWidget.hideSidebar(),this.inspectedPagePlaceholder.update()),this.changingDockSide=!0}onDockSideChange(e){this.updateDeviceModeView();const i=e?e.data.to:t.DockController.DockController.instance().dockSide();if(void 0===i)throw new Error("Got onDockSideChange event with unexpected undefined for dockSide()");"undocked"===i?this.updateForUndocked():this.toolboxRootView&&e&&"undocked"===e.data.from?this.rootSplitWidget.hideSidebar():this.updateForDocked(i)}onAfterDockSideChange(e){this.changingDockSide&&(e.data.from&&"undocked"===e.data.from&&this.updateForDocked(e.data.to),this.changingDockSide=!1,this.inspectedPagePlaceholder.update())}updateForDocked(e){this.rootSplitWidget.resizerElement().style.transform="right"===e?"translateX(2px)":"left"===e?"translateX(-2px)":"",this.rootSplitWidget.setVertical("right"===e||"left"===e),this.rootSplitWidget.setSecondIsSidebar("right"===e||"bottom"===e),this.rootSplitWidget.toggleResizer(this.rootSplitWidget.resizerElement(),!0),this.rootSplitWidget.toggleResizer(t.InspectorView.InspectorView.instance().topResizerElement(),"bottom"===e),this.rootSplitWidget.showBoth()}updateForUndocked(){this.rootSplitWidget.toggleResizer(this.rootSplitWidget.resizerElement(),!1),this.rootSplitWidget.toggleResizer(t.InspectorView.InspectorView.instance().topResizerElement(),!1),this.rootSplitWidget.hideMain()}isDocked(){return"undocked"!==t.DockController.DockController.instance().dockSide()}onSetInspectedPageBounds(t){if(this.changingDockSide)return;const i=this.inspectedPagePlaceholder.element.window();if(!i.innerWidth||!i.innerHeight)return;if(!this.inspectedPagePlaceholder.isShowing())return;const o=t.data;console.timeStamp("AdvancedApp.setInspectedPageBounds"),e.InspectorFrontendHost.InspectorFrontendHostInstance.setInspectedPageBounds(o)}}globalThis.Emulation=globalThis.Emulation||{},globalThis.Emulation.AdvancedApp=H;class N{static instance(e={forceNew:null}){const{forceNew:t}=e;return j&&!t||(j=new N),j}createApp(){return H.instance()}}var Z=Object.freeze({__proto__:null,AdvancedApp:H,AdvancedAppProvider:N});export{Z as AdvancedApp,S as DeviceModeToolbar,L as DeviceModeView,U as DeviceModeWrapper,Q as InspectedPagePlaceholder,y as MediaQueryInspector};
